<!DOCTYPE HTML>
<html lang="{{theme.lang}}">
    <head>
        <meta charset="UTF-8">
        {%- if post.filename == 'index' %}        
        <title>{{config.package.title|title}} - {{config.package.description}}</title>
        {%- else %}
        <title>{{config.package.title|title}} - {{post.title}}</title>
        {%- endif %}
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="generator" content="{{system.name}} {{system.version}}" />
        {%- block assets %}
        <link type="image/x-icon" href="{{static_url('favicon.ico')}}" rel="icon">
        <link rel="stylesheet" href="{{static_url('css/normalize.css')}}" />
        <link rel="stylesheet" href="{{static_url('css/site.css')}}" />
        <link rel="stylesheet" href="{{static_url('css/solarized.css')}}" />
        <link rel="stylesheet" href="{{static_url('style.css')}}" />

        <style>
          /* alipay iconfont */
          @font-face {
            font-family: "rei";
            src: url("https://i.alipayobjects.com/common/fonts/rei.eot?20130423"); /* IE9 */
            src: url("https://i.alipayobjects.com/common/fonts/rei.eot?20130423#iefix") format("embedded-opentype"), /* IE6-IE8 */
            url("https://i.alipayobjects.com/common/fonts/rei.woff?20130423") format("woff"), /* chrome 6+、firefox 3.6+、Safari5.1+、Opera 11+ */
            url("https://i.alipayobjects.com/common/fonts/rei.ttf?20130423")  format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
            url("https://i.alipayobjects.com/common/fonts/rei.svg?20130423#rei") format("svg"); /* iOS 4.1- */
          }
          .iconfont {
            font-family: "rei"!important;
            font-style: normal;
            font-weight: normal;
            cursor: default;
            -webkit-font-smoothing: antialiased;
          }
        </style>

        <script>
        if (!location.port) {
          (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
          })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
          ga('create', 'UA-39169474-1', 'auto');
          ga('send', 'pageview');
        }
        </script>

        {%- set pkg = config.package %}
        {%- set deps = dependencies %}

        {%- if deps.seajs %}
        <script src="{{content_url('')}}spm_modules/{{deps.seajs}}?nowrap"></script>
        {%- else %}
        <script src="{{static_url('js/sea.js?nowrap')}}"></script>
        {%- endif %}

        <!--[if lt IE 9]>
        <script src="{{static_url('js/html5shiv.js')}}"></script>
        <![endif]-->
        {%- endblock %}
        {%- block afterstyle %}{% endblock %}

    </head>
    <body>

        <script src="{{content_url('')}}dist/bundle.js?nowrap"></script>
        
        <div id="body-wrapper">
            <div class="head-area">
                <div class="title-area">
                    <h1>
                        <a href="{{content_url('index.html')}}">{{config.package.title|title}}</a>
                    </h1>
                    <p class="description">{{config.package.description}}</p>
                    <img src="/static/alice-top.png" alt="alice" />
                </div>
                <iframe src="http://ghbtns.com/github-btn.html?user=aliceui&repo=aliceui.org&type=watch&count=true"
                allowtransparency="true" frameborder="0" scrolling="0" width="90" height="20"></iframe>
            </div>
            <div class="nav-area">
                <ol class="main-nav">
                    <li><a href="/"><i title="首页" class="iconfont"></i> 首页</a></li>
                    {%- for item in resource.pages|find_category('alice') %}
                    <li><a href="{{permalink_url(item)}}">{{item.title}}</a></li>
                    {%- endfor %}
                </ol>
            </div>
            <div class="main-area">
                {%- if post.toc %}
                <div class="side-area">{{post.toc}}</div>
                {% else %}
                <div class="side-area">
                    <ul>
                        <li class="side-loading"><img width="160" alt="加载中..." src="/static/loading.gif"></li>
                    </ul>
                </div>
                {%- endif %}
                <script type="text/template" id="list-template">
                    <li><a href="#"><i class="iconfont" title="单箭头右">&#x00E5;</i></a></li>
                </script>
                <div class="content-area">
                    <h1>{{post.title}}</h1>
                    <div class="content">{{ post.html|replace_code|add_anchor }}</div>
                </div>
                {%- if post.filename == 'index' %}
                <div class="comment-area">
                    <!-- Duoshuo Comment BEGIN -->
                    <div class="ds-thread"></div>
                    <script type="text/javascript">
                    var duoshuoQuery = {short_name:"aliceui"};
                    (function() {
                        var ds = document.createElement('script');
                        ds.type = 'text/javascript';ds.async = true;
                        ds.src = 'http://static.duoshuo.com/embed.js';
                        ds.charset = 'UTF-8';
                        (document.getElementsByTagName('head')[0] 
                        || document.getElementsByTagName('body')[0]).appendChild(ds);
                        })();
                    </script>
                    <!-- Duoshuo Comment END -->
                </div>
                {%- endif %}
            </div>
        </div>
        <div id="footer-wrapper">
            <footer>
            <p class="powered">
                <a href="http://aralejs.org">Arale</a> •
                <a href="http://aliceui.org">Alice</a> •
                <a href="http://seajs.org">Sea.js</a> •
                <a href="http://spmjs.io">spmjs.io</a> •
                <a href="{{system.homepage}}">{{system.name}}</a>
            </p>
            </footer>
        </div>
        <script>
          window['aliceui.org'].init();
        </script>
    </body>
</html>

